&:focus {@include button(focus);}
}
-// styling for elements within popovers that look like notifications
+// styling for all menuitems in popovers
@mixin menuitem($bg, $flat: true) {
// lighten the background color always
@import 'widgets/misc';
@import 'widgets/keyboard';
@import 'widgets/looking-glass';
-// Lock / login screens
-@import 'widgets/login-dialog';
-@import 'widgets/screen-shield';
+// Lock / login screen
+@import 'widgets/login-lock';
icon-size: $base_icon_size;
-st-icon-style: symbolic;
}
-}
\ No newline at end of file
+}
+++ /dev/null
-/* Login Dialog */
-
-.login-dialog-banner-view {
- padding-top: 24px;
- max-width: 23em;
-}
-
-.login-dialog,
-.unlock-dialog {
- //reset
- border: none;
- background-color: transparent;
-
- $_gdm_bg: $system_bg_color;
-
- .modal-dialog-button-box { spacing: 3px; }
- .modal-dialog-button {
- padding: 4px 18px;
- background-color: darken($system_bg_color, 3%);
- border-color: darken($system_bg_color, 3%);
- color: $osd_fg_color;
-
- $_hover_c: lighten($_gdm_bg, 5%);
- &:hover, &:focus {
- background-color: $_hover_c;
- border-color: $_hover_c;
- }
- &:active {
- $_active_c: darken($_gdm_bg, 5%);
- background-color: $_active_c;
- border-color: $_active_c;
- }
- &:insensitive {
- @include button(insensitive);
- border-color: darken($_gdm_bg, 5%);
- background-color: darken($_gdm_bg, 5%);
- color: transparentize($osd_fg_color, 0.3);
- }
- &:default {
- @include button(default);
- }
- }
-
- .cancel-button,
- .switch-user-button,
- .login-dialog-session-list-button {
- padding: 0;
- border-radius: 99px;
- width: $large_icon_size;
- height: $large_icon_size;
- border-color: darken($system_bg_color, 3%);
- background-color: darken($system_bg_color, 3%);
-
- StIcon { icon-size: $base_icon_size; }
- }
-
- .caps-lock-warning-label,
- .login-dialog-message-warning {
- color: $osd_fg_color;
- }
-}
-
-.login-dialog-logo-bin { padding: 24px 0px; }
-.login-dialog-banner { color: darken($osd_fg_color,10%); }
-.login-dialog-button-box { width: 23em; spacing: 5px; }
-.login-dialog-message { text-align: center; }
-.login-dialog-user-selection-box { padding: 100px 0px; }
-.login-dialog-not-listed-label {
- padding-left: 2px;
- .login-dialog-not-listed-button:focus &,
- .login-dialog-not-listed-button:hover & {
- color: $osd_fg_color;
- }
-}
-
-.login-dialog-not-listed-label {
- @extend %caption;
- font-weight: bold;
- color: darken($osd_fg_color,30%);
- padding-top: 1em;
-}
-
-.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
-.login-dialog-auth-list {
- spacing: 6px;
- margin-left: 2em;
-}
-
-.login-dialog-auth-list-title {
- margin-left: 2em;
-}
-
-.login-dialog-auth-list-item {
- border-radius: $base_border_radius + 4px;
- padding: 6px;
- color: darken($osd_fg_color,30%);
- &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
-}
-
-.login-dialog-auth-list-label {
- @include fontsize($base_font_size + 2);
- font-weight: bold;
- padding-left: 15px;
- &:ltr { padding-left: 14px; text-align: left; }
- &:rtl { padding-right: 14px; text-align: right; }
-}
-
-.login-dialog-user-list-view { -st-vfade-offset: 1em; }
-.login-dialog-user-list {
- spacing: 12px;
- width: 23em;
- &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
- &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
-}
-
-.login-dialog-user-list-item {
- border-radius: $base_border_radius + 4px;
- padding: 6px;
- color: darken($osd_fg_color,30%);
- &:ltr .user-widget { padding-right: 1em; }
- &:rtl .user-widget { padding-left: 1em; }
- .login-dialog-timed-login-indicator {
- height: 2px;
- margin-top: 6px;
- background-color: $osd_fg_color;
- }
- &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
-}
-
-.user-widget-label {
- color: $osd_fg_color;
-}
-
-.user-widget.horizontal .user-widget-label {
- @include fontsize($base_font_size + 2);
- font-weight: bold;
- padding-left: 15px;
-
- &:ltr { padding-left: 14px; text-align: left; }
- &:rtl { padding-right: 14px; text-align: right; }
-}
-
-.user-widget.vertical .user-widget-label {
- @include fontsize($base_font_size + 5);
- text-align: center;
- font-weight: normal;
- padding-top: 16px;
-}
-
-.login-dialog-timed-login-indicator {
- height: 2px;
- background-color: darken($fg_color,40%);
-}
-
-.login-dialog-prompt-layout {
- padding-top: 24px;
- padding-bottom: 12px;
- spacing: $base_padding * 2;
- width: 23em;
-}
-
-.login-dialog-prompt-entry {
- height: 1.5em;
-}
-
-.login-dialog-prompt-label {
- color: darken($osd_fg_color, 20%);
- @include fontsize($base_font_size + 1);
- padding-top: 1em;
-}
-
-.login-dialog {
- StEntry {
- @if $variant=='dark' {
- $_gdm_entry_bg: darken($system_bg_color, 3%);
- background-color: $_gdm_entry_bg;
- color: $fg_color;
- }
- }
-}
-
-// Custom styling for unlock entry
-.unlock-dialog {
- StEntry {
- border:none !important;
- &:focus {
- background-color: if($variant == 'light', transparentize(white, 0.9), transparentize($fg_color, 0.9));
- }
- &:insensitive {
- color: if($variant == 'light', transparentize(white, 0.5), transparentize($fg_color, 0.5));
- background-color: if($variant == 'light', transparentize(white, 0.95), transparentize($fg_color, 0.95));
- }
- }
-
- .cancel-button,
- .switch-user-button,
- .login-dialog-session-list-button {
- border-color: transparent;
- background-color: transparentize($fg_color, 0.9);
- }
-}
--- /dev/null
+$_gdm_bg: $system_bg_color;
+$_gdm_fg: white;
+$_gdm_dialog_width: 23em;
+
+// common style for gdm and lockscreen
+.login-dialog,
+.unlock-dialog {
+
+ .caps-lock-warning-label,
+ .login-dialog-message-warning {
+ color: $_gdm_fg;
+ }
+}
+
+/* Login Dialog */
+.login-dialog {
+ background-color: $_gdm_bg;
+}
+
+// buttons
+.login-dialog-button {
+ @extend .button;
+
+ &.cancel-button,
+ &.switch-user-button,
+ &.login-dialog-session-list-button {
+ @extend .icon-button;
+ }
+
+ &.cancel-button {
+ padding: $base_padding*1.5;
+ }
+}
+
+.login-dialog-button-box {
+ width: $_gdm_dialog_width;
+ spacing: $base_padding*2;
+}
+
+.login-dialog-logo-bin {
+ margin:3em 0;
+}
+.login-dialog-banner { color: darken($_gdm_fg,10%); }
+.login-dialog-banner-view { max-width: $_gdm_dialog_width; }
+.login-dialog-message { text-align: center; }
+.login-dialog-user-selection-box { padding: 100px 0px; }
+
+.login-dialog-not-listed-label {
+ @include fontsize($base_font_size);
+ font-weight: bold;
+ color: darken($_gdm_fg,30%);
+ padding: $base_padding*2;
+
+ .login-dialog-not-listed-button:focus &,
+ .login-dialog-not-listed-button:hover & {
+ color: $_gdm_fg;
+ }
+ .login-dialog-not-listed-button:focus & {
+ text-decoration: underline;
+ }
+}
+
+.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
+.login-dialog-auth-list {
+ spacing: 6px;
+ margin-left: 2em;
+}
+.login-dialog-auth-list-title {
+ margin-left: 2em;
+}
+
+.login-dialog-auth-list-item {
+ border-radius: $base_border_radius*2;
+ padding: 4px;
+ color: darken($_gdm_fg,30%);
+
+ &:focus, &:selected {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ }
+}
+
+.login-dialog-auth-list-label {
+ @include fontsize($base_font_size + 2);
+ font-weight: bold;
+ padding-left: 15px;
+
+ &:ltr { padding-left: 14px; text-align: left; }
+ &:rtl { padding-right: 14px; text-align: right; }
+}
+
+.login-dialog-user-list-view { -st-vfade-offset: 1em; }
+
+.login-dialog-user-list {
+ spacing: 12px;
+ width: $_gdm_dialog_width;
+
+ .login-dialog-user-list-item {
+ border-radius: $base_border_radius + 4px;
+ padding: $base_padding;
+ background-color: transparentize($_gdm_fg, .95);
+ color: $_gdm_fg;
+
+ @if $is_highcontrast {
+ box-shadow:inset 0 0 0 1px $hc_inset_color;;
+ }
+ .user-widget .user-icon {
+ border: 4px solid transparent;
+ }
+
+ .login-dialog-timed-login-indicator {
+ height: 2px;
+ margin-top: 6px;
+ background-color: darken($_gdm_fg, 30%);
+ }
+
+ &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
+ }
+
+ &:expanded .login-dialog-user-list-item {
+ transition-duration: 300ms;
+ transition-timing-function: ease;
+
+ &:hover {
+ background-color: transparentize($_gdm_fg, .9);
+ color: $_gdm_fg;
+ }
+
+ &:selected {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ &:hover { background-color: lighten($selected_bg_color,5%); }
+ }
+
+ &:logged-in {
+ .user-widget .user-icon {
+ border-color: $selected_bg_color;
+ }
+ }
+ }
+}
+
+.login-dialog-prompt-layout {
+ spacing: $base_padding*2;
+ width: 26em;
+}
+
+.login-dialog-prompt-entry {}
+
+
+/* Screen Shield */
+// a.k.a. the lockscreen
+
+.unlock-dialog {
+ background-color: transparent;
+}
+
+.screen-shield-background { // just the shadow, really
+ background: black;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.6);
+}
+
+#lockDialogGroup {
+ background-color: $_gdm_bg;
+}
+
+// Clock
+.unlock-dialog-clock {
+ color: $_gdm_fg;
+ spacing: 2em;
+
+ .unlock-dialog-clock-time {
+ @extend %numeric;
+ @include fontsize(72);
+ font-weight: 600;
+ }
+
+ .unlock-dialog-clock-date {
+ @extend %title_1;
+ font-weight: 600;
+ }
+
+ .unlock-dialog-clock-hint {
+ margin-top: 2em;
+ padding: $base_padding $base_padding*3;
+ background-color: transparentize(black,0.9);
+ border-radius: $base_border_radius*2;
+ }
+}
+
+// Notifications
+#unlockDialogNotifications {
+ StButton#vhandle, StButton#hhandle {
+ background-color: transparentize($bg_color,0.7);
+ &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
+ &:active { background-color: transparentize($selected_bg_color,0.5); }
+ }
+}
+
+.unlock-dialog-notifications-container {
+ margin: 12px;
+ spacing: 6px;
+ width: $_gdm_dialog_width;
+ background-color: transparent;
+
+ .summary-notification-stack-scrollview {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .notification,
+ .unlock-dialog-notification-source {
+ padding: 12px 16px;
+ border: none;
+ background-color: transparentize($_gdm_fg,0.9);
+ color: $_gdm_fg;
+ border-radius: $modal_radius;
+
+ &.critical { background-color: transparentize($_gdm_fg,0.8) }
+ }
+}
+
+.unlock-dialog-notification-label {
+ padding-left: 12px;
+ padding-right: 0;
+ &:rtl { padding-right: 12px; padding-left: 0; }
+}
+
+.unlock-dialog-notification-count-text {
+ font-weight: bold;
+ padding: 0 12px;
+ color: $_gdm_fg;
+ background-color: transparentize($_gdm_fg, 0.9);
+ border-radius: 99px;
+}
+
+
+// User Widget
+.user-widget {
+
+ .user-widget-label {
+ color: $_gdm_fg;
+ }
+
+ // layout of the user list
+ &.horizontal {
+ spacing: $base_padding*3;
+ .user-widget-label {
+ @extend %title_3;
+ }
+
+ .user-icon {
+ & StIcon {
+ padding: 12px;
+ icon-size: $base_icon_size*2;
+ width: $base_icon_size*3;
+ height: $base_icon_size*3;
+ background-color: transparentize($_gdm_fg, 0.9);
+ }
+ }
+ }
+
+ // layout of the login prompt
+ &.vertical {
+ spacing: $base_padding*4;
+
+ .user-widget-label {
+ @extend %title_1;
+ text-align: center;
+ margin-bottom: .75em;
+ }
+
+ .user-icon {
+ icon-size: $base_icon_size*10;
+
+ & StIcon {
+ padding: 32px;
+ icon-size: $base_icon_size*4;
+ background-color: transparentize($_gdm_fg, 0.9);
+ }
+ }
+ }
+}
color: $osd_fg_color;
border-radius: 99px;
icon-size: $base_icon_size * 4; // 64px
- &:hover {
- color: lighten($osd_fg_color,30%);
- }
& StIcon {
background-color: transparentize($osd_fg_color,0.95);
}
&.user-avatar {
- border: 2px $osd_fg_color;
- }
-}
-
-.user-widget.vertical .user-icon {
- icon-size: $base_icon_size * 6; // 128px
-
- & StIcon {
- padding: $base_padding * 3 + 2px; // 20px
- padding-top: $base_padding * 3; // 18 px
- padding-bottom: $base_padding * 3 + 4px; // 22px
- width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px;
+ box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
+ @if $is_highcontrast {
+ box-shadow:inset 0 0 0 1px $hc_inset_color;
+ }
}
}
.lightbox { background-color: black; }
.flashspot { background-color: white; }
-
// Hidden
.hidden { color: rgba(0,0,0,0);}
+++ /dev/null
-/* Screen Shield */
-
-.unlock-dialog-clock {
- color: white;
- font-weight: 300;
- text-align: center;
- spacing: 24px;
- padding-bottom: 2.5em;
-}
-
-.unlock-dialog-clock-time {
- font-size: 64pt;
- padding-top: 42px;
- @extend %numeric;
-}
-
-.unlock-dialog-clock-date {
- font-size: 16pt;
- font-weight: normal;
-}
-
-.unlock-dialog-clock-hint {
- font-weight: normal;
- padding-top: 48px;
-}
-
-.unlock-dialog-notifications-container {
- margin: 12px;
- spacing: 6px;
- width: 23em;
- background-color: transparent;
-
- .summary-notification-stack-scrollview {
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .notification,
- .unlock-dialog-notification-source {
- padding: 12px 16px;
- border: none;
- background-color: transparentize($osd_fg_color,0.9);
- color: $osd_fg_color;
- border-radius: $modal_radius;
-
- &.critical { background-color: transparentize($osd_fg_color,0.8) }
- }
-}
-
-.unlock-dialog-notification-label {
- padding-left: 12px;
- padding-right: 0;
- &:rtl { padding-right: 12px; padding-left: 0; }
-}
-
-.unlock-dialog-notification-count-text {
- font-weight: bold;
- padding: 0 12px;
- color: $osd_fg_color;
- background-color: transparentize($osd_fg_color, 0.9);
- border-radius: 99px;
-}
-
-.screen-shield-background { //just the shadow, really
- background: black;
- box-shadow: 0 2px 4px rgba(0,0,0,0.6);
-}
-
-#lockDialogGroup {
- background-color: $system_bg_color;
-}
-#unlockDialogNotifications {
- StButton#vhandle, StButton#hhandle {
- background-color: transparentize($bg_color,0.7);
- &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
- &:active { background-color: transparentize($selected_bg_color,0.5); }
- }
-}
'gnome-shell-sass/widgets/_hotplug.scss',
'gnome-shell-sass/widgets/_ibus-popup.scss',
'gnome-shell-sass/widgets/_keyboard.scss',
- 'gnome-shell-sass/widgets/_login-dialog.scss',
+ 'gnome-shell-sass/widgets/_login-lock.scss',
'gnome-shell-sass/widgets/_looking-glass.scss',
'gnome-shell-sass/widgets/_message-list.scss',
'gnome-shell-sass/widgets/_misc.scss',
'gnome-shell-sass/widgets/_panel.scss',
'gnome-shell-sass/widgets/_popovers.scss',
'gnome-shell-sass/widgets/_quick-settings.scss',
- 'gnome-shell-sass/widgets/_screen-shield.scss',
'gnome-shell-sass/widgets/_screenshot.scss',
'gnome-shell-sass/widgets/_scrollbars.scss',
'gnome-shell-sass/widgets/_search-entry.scss',
this.add_child(this._mainBox);
this.cancelButton = new St.Button({
- style_class: 'modal-dialog-button button cancel-button',
+ style_class: 'login-dialog-button cancel-button',
accessible_name: _('Cancel'),
button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
reactive: this._hasCancelButton,
}, class SessionMenuButton extends St.Bin {
_init() {
let button = new St.Button({
- style_class: 'modal-dialog-button button login-dialog-session-list-button',
+ style_class: 'login-dialog-button login-dialog-session-list-button',
icon_name: 'emblem-system-symbolic',
reactive: true,
track_hover: true,
const FADE_OUT_TRANSLATION = 200;
const FADE_OUT_SCALE = 0.3;
-const BLUR_BRIGHTNESS = 0.55;
-const BLUR_SIGMA = 60;
+const BLUR_BRIGHTNESS = 0.65;
+const BLUR_SIGMA = 45;
const SUMMARY_ICON_SIZE = 32;
super._init({
vertical: true,
name: 'unlockDialogNotifications',
- style_class: 'unlock-dialog-notifications-container',
});
this._scrollView = new St.ScrollView({ hscrollbar_policy: St.PolicyType.NEVER });
// Switch User button
this._otherUserButton = new St.Button({
- style_class: 'modal-dialog-button button switch-user-button',
+ style_class: 'login-dialog-button switch-user-button',
accessible_name: _('Log in as another user'),
button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
reactive: false,
projects / gnome-shell.git / commitdiff